
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { BookOpen, Brain, Users, Plus } from "lucide-react";

interface GroupData {
  name: string;
  members: number;
  category: string;
  latest: string;
  description: string;
}

interface StudyGroupsProps {
  role: 'student' | 'teacher';
}

export const StudyGroups = ({ role }: StudyGroupsProps) => {
  const studentGroups = {
    "Study Groups": [
      { name: "Math Study Buddies", members: 156, category: "mathematics", latest: "2 hours ago", description: "Collaborative math problem solving" },
      { name: "Science Lab Partners", members: 234, category: "science", latest: "1 hour ago", description: "Share lab notes and experiments" },
      { name: "Language Exchange Circle", members: 189, category: "language", latest: "3 hours ago", description: "Practice languages together" },
    ],
    "Subject Communities": [
      { name: "Creative Writers Hub", members: 298, category: "english", latest: "30 minutes ago", description: "Share stories and get feedback" },
      { name: "History Enthusiasts", members: 167, category: "history", latest: "1 hour ago", description: "Discuss historical events and analysis" },
      { name: "Art & Design Collective", members: 145, category: "arts", latest: "45 minutes ago", description: "Showcase artwork and techniques" },
    ],
    "Peer Support": [
      { name: "Study Tips & Techniques", members: 312, category: "study-skills", latest: "15 minutes ago", description: "Share effective study methods" },
      { name: "Motivation & Accountability", members: 267, category: "support", latest: "1 hour ago", description: "Keep each other motivated" },
      { name: "Test Prep Warriors", members: 178, category: "exams", latest: "2 hours ago", description: "Conquer exams together" },
    ]
  };

  const teachingGroups = {
    "Subject Teaching Groups": [
      { name: "STEM Educators Network", members: 89, category: "stem", latest: "1 hour ago", description: "Innovative STEM teaching methods and resources" },
      { name: "Language Arts Teachers", members: 67, category: "language-arts", latest: "30 minutes ago", description: "Creative writing and reading comprehension strategies" },
      { name: "Mathematics Mentors", members: 52, category: "mathematics", latest: "2 hours ago", description: "Making math engaging and accessible" },
    ],
    "Professional Development": [
      { name: "New Teacher Support Circle", members: 143, category: "support", latest: "45 minutes ago", description: "Guidance and mentorship for new educators" },
      { name: "EdTech Innovators", members: 98, category: "technology", latest: "1 hour ago", description: "Integrating technology in the classroom" },
      { name: "Assessment Excellence", members: 76, category: "assessment", latest: "3 hours ago", description: "Effective assessment and feedback strategies" },
    ],
    "Collaborative Projects": [
      { name: "Cross-Curricular Designers", members: 34, category: "curriculum", latest: "2 hours ago", description: "Creating interdisciplinary learning experiences" },
      { name: "Research & Best Practices", members: 45, category: "research", latest: "4 hours ago", description: "Sharing educational research and proven methods" },
      { name: "Student Engagement Squad", members: 61, category: "engagement", latest: "1 hour ago", description: "Strategies to boost student motivation" },
    ]
  };

  const groups = role === 'teacher' ? teachingGroups : studentGroups;

  const getIconForCategory = (category: string) => {
    if (category === "Study Groups" || category === "Subject Teaching Groups") return <BookOpen className="w-4 h-4" />;
    if (category === "Subject Communities" || category === "Professional Development") return <Brain className="w-4 h-4" />;
    if (category === "Peer Support" || category === "Collaborative Projects") return <Users className="w-4 h-4" />;
    return <BookOpen className="w-4 h-4" />;
  };

  return (
    <div className="space-y-6">
      {Object.entries(groups).map(([category, groupList]) => (
        <Card key={category} className="bg-white dark:bg-gray-800 shadow-sm border">
          <CardHeader>
            <CardTitle className="text-lg font-semibold flex items-center gap-2">
              {getIconForCategory(category)}
              {category}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4">
              {groupList.map((group: GroupData, index: number) => (
                <div key={index} className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors cursor-pointer">
                  <div className="flex items-center space-x-4">
                    <Avatar>
                      <AvatarFallback>
                        {getIconForCategory(category)}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <h4 className="font-semibold text-gray-900 dark:text-gray-100">{group.name}</h4>
                      <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">{group.description}</p>
                      <p className="text-xs text-gray-400">
                        {group.members} members • Latest: {group.latest}
                      </p>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button size="sm" variant="outline">
                      <Users className="w-4 h-4 mr-1" />
                      Join
                    </Button>
                    {role === 'teacher' && (
                      <Button size="sm" variant="ghost">
                        <Plus className="w-4 h-4 mr-1" />
                        Start a Group
                      </Button>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
};
